<template>
  <div class="answer-item-container">
    <div class="answer-item" v-for="(item, index) in list" :key="item.id">
      <div class="title">{{`${index + 1}、${item.name}`}}</div>
      <div class="desc">{{item.desc}}</div>
      <div class="option-list" v-for="subItem in item.options" :key="subItem.id">
         <input type="radio" :value="subItem.name"/>
         <span style="margin-top: 3px;">{{subItem.name}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AnswerItem',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss" scoped>
.answer-item-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 10px;
}

.answer-item {
  .desc {
    margin-left: 30px;
  }

  .option-list {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-left: 40px;
  }
}
</style>